﻿@{
    Layout = "_layout";
}
@{
    ViewData["Title"] = "分类列表";
   
}
@model List<BuyWithoutLoseMoney.Core.Models.ProductType>
<div>
    <div class="demoTable layui-form">
        搜索第一级产品分类名：
        <div class="layui-inline">
            <input class="layui-input" name="firstTypeName" id="firstTypeName" autocomplete="off">
        </div> 
        搜索第二级产品分类名：
        <div class="layui-inline">
            <input class="layui-input" name="secondTypeName" id="secondTypeName" autocomplete="off">
        </div>
        <div class="layui-inline">
            <button class="layui-btn" data-type="reload"><a style="color:white">搜索</a></button>
            <button class="layui-btn" id="btnAdd"> <a href="/admin/proudctcategory/create" style="color:white">新建</a></button>
        </div>

    </div>
</div>
<table class="layui-hide" id="demo" lay-filter="test"></table>
@section Scripts{
    <script>
        layui.use('table', function () {
            var table = layui.table;
            //第一个实例
            table.render({
                elem: '#demo'
                , url: '/admin/proudctcategory/index' //数据接口
                , page: true //开启分页
                , method: "post"
                , cols: [[ //表头
                    { field: 'id', title: 'ID', width: 100, sort: true, fixed: 'left' }
                    , { field: 'firstTypeName', title: '一级产品分类', width: 120 }
                    , { field: 'secondTypeName', title: '二级产品分类', width: 160, sort: true }
                    , { field: 'thirdTypeName', title: '三级产品分类', width: 120 }
                    , { title: "操作", fixed: 'right', templet: " <span><a lay-event='edit' class='layui-btn layui-btn-warm layui-btn-sm'>编辑</a> <a class='layui-btn layui-btn-danger layui-btn-sm' lay-event='del'>删除</a></span>" }

                ]]
                , id: "ProductTypeList"
            });
            //搜索功能
            var $ = layui.$, active = {
                reload: function () {
                    var firstTypeName = $('#firstTypeName');
                    var secondTypeName = $('#secondTypeName');
                    //执行重载
                    table.reload('ProductTypeList', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            firstTypeName: firstTypeName.val(),
                            secondTypeName: secondTypeName.val(),
                        }
                    });
                }
            };
            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            ////单元格工具事件
            table.on('tool(test)', function (obj) { // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                if (layEvent === 'del') { //删除
                    layer.confirm('确定删除吗？', function (index) {
                        $.post("/admin/proudctcategory/del", { id: data.id }, function (res) {
                            if (res.isSuccess) {
                                layer.msg(res.msg, function () {
                                    table.reload("ProductTypeList");
                                });
                            } else {
                                layer.msg(res.msg);
                            }
                        });
                    });
                } else if (layEvent === "edit") {
                    var index = layer.open({
                        type: 2,
                        content: '/admin/proudctcategory/edit/' + data.id,
                        area: ["40%", "100%"]
                    });
                }
                //$("#btnAdd").on("click", function () {
                //    var index = layer.open({
                //        type:2,
                //        content: '/admin/proudctcategory/create',
                //        area: ["40%", "100%"]
                //    });
                //})
            });
        });
    </script>
}
